<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 15px solid red;
            margin: 20px;
            overflow: hidden;
            /* 溢出隐藏和清除浮动 */
            position: relative;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: blue;
            position: absolute;
            left: 10px;
            top: 10px;
        }
        
        .back {
            width: 100px;
            height: 40px;
            background-color: aquamarine;
            display: none;
        }
        
        .container {
            width: 1440px;
            height: 500px;
            background-color: blanchedalmond;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function() {
            // 1.width() /height() 获取设置元素 width和height大小
            console.log($("div").width());
            $("div").width(300);
            // 2.innerWidth() /innerHeight() 获取设置元素 width和height+padding大小
            console.log($("div").innerWidth());
            console.log($("div").innerHeight());
            // 3.outerWidth() /outerHeight(true) 获取元素width和height+padding+border大小
            console.log($("div").outerWidth());
            console.log($("div").outerHeight());
            // 4.outerWidth(true) / outerHeight(true)获取设置width和height +padding+border+margin
            console.log($("div").outerHeight(true));
            console.log($("div").outerWidth());

            // 获取设置距离文档的位置
            console.log($(".son").offset())
            console.log($(".son").offset().top);
            $("son").offset({
                top: 200,
                left: 200
            });

            // 这个方法只能设置不能偏移
            // 获取距离带有定位父级位置(偏移) position 如果没有带定位的父级，则以文档为准
            console.log($(".son").position());

            // 被卷去的头部scrollTop() 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                console.log($(document).scrollTop()); //打印出来页面滚动距离
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn(); //小盒子显示出来
                } else {
                    $(".back").fadeOut(); //小盒子隐藏
                }
            });
            // $(document).srcollTop(100) 设置文档页面距离 

            // 返回顶部
            $(".back").click(function() {
                // 不能是文档，而是htmlhebody元素做动画
                $("body.html").stop().animate({ //缓慢效果
                    scrollTop: 0
                })
            })
        })
    </script>

</body>

</html>